import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { CommonTable } from 'components';
import { refundRecordAction } from './index';
import SearchList from './SearchList/SearchList';
import moment from 'moment';

const convertParams = (obj = {}) => {
    const { time = [], orderNo = '', userName = '', phoneNo = '', status = '', payTradeNo } = obj;
    const isArr = Array.isArray(time) && time.length > 0;
    return {
        startTime: isArr ? time[0].format('YYYY-MM-DD 00:00:00') : '',
        endTime: isArr ? time[1].format('YYYY-MM-DD 23:59:59') : '',
        orderNo,
        phoneNo,
        userName,
        status,
        payTradeNo
    };
}

const payStatus = {
    0: '支付中',
    1: '支付成功',
    2: '支付失败'
};

class RefundRecord extends Component {
    columns = [
        {
            title: '还款时间',
            dataIndex: 'payTime',
            key: 'payTime',
            render(text) {
                return moment(Number(text) * 1000).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
        { title: '姓名', dataIndex: 'userName', key: 'userName' },
        { title: '手机号', dataIndex: 'phoneNo', key: 'phoneNo' },
        { title: '还款总额', dataIndex: 'totalMoney', key: 'totalMoney' },
        {
            title: '还款状态',
            dataIndex: 'payStatus',
            key: 'payStatus',
            render(text) {
                return payStatus[text];
            }
        },
        { title: '交易流水号', dataIndex: 'payTradeNo', key: 'payTradeNo' }
    ];

    constructor(props) {
        super(props);
        this.state = {};
        this.pageSize = 10;
        this.searchParams = convertParams();
    }

    handlePageChange = (info) => {
        const { current, pageSize } = info;
        const { getTableData } = this.props;
        getTableData({ pageSize, pageNum: current, ...this.searchParams });
    }

    handleSearch = (obj) => {
        const params = convertParams(obj);
        this.searchParams = params;
        const { getTableData } = this.props;
        getTableData({ ...params, pageSize: this.pageSize, pageNum: 1 });
    }

    componentDidMount() {
        const { getTableData } = this.props;
        getTableData({ pageSize: this.pageSize, pageNum: 1, ...this.searchParams });
    }

    componentWillUnmount() {
        const { setTableData } = this.props;
        setTableData({ data: [], pagination: {} });
    }


    render() {
        const { tableData: { data, pagination }, loading } = this.props;
        return (
            <div>
                <SearchList submit={this.handleSearch}/>
                <CommonTable
                    columns={this.columns}
                    dataSource={data}
                    pagination={pagination}
                    loading={loading}
                    handlePageChange={this.handlePageChange}
                />
            </div>
        );
    }



}
const mapStateToProps = (state) => {
    const { paymentManageState: { refundRecordState } } = state;
    return {
        tableData: refundRecordState['tableData'],
        loading: refundRecordState['loading']
    };

}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: refundRecordAction.rrdGetTableData,
        setTableData: refundRecordAction.rrdSetTableData
    }, dispatch);
}


export default connect(mapStateToProps, mapDispatchToProps)(RefundRecord);